<template>
<view>
	<view :class="['mask', { act: value }]" @tap="clear"></view>
	<view :class="['password-input', { act: value && !verify }]">
		<view v-for="(i, idx) in 6" :key="idx"><view :class="{ act: idx < passLen }"></view></view>
	</view>
	<view :class="['password-input code', { act: value && verify }]">
		<view class="title solid-bottom">发送验证码</view>
		<view class="tip padding-top-sm padding-bottom-sm text-sm text-lgrey text-center solid-bottom">验证码已发送到{{ phone }}</view>
		<view class="verify">
			<view class="code">
				<view v-for="(i, k) in 6" :class="{act: v_code[k] !== undefined }" :key="i">
					{{ v_code[k] ? v_code[k] : '' }}
				</view>
			</view>
		</view>
	</view>	
	<key-board :show="value" @on-close="clear" @on-key="key" @on-del="del" :verify="verify"></key-board>
</view>
</template>

<script>
	import KeyBoard from './keyboard'
	import { mapGetters } from 'vuex'
	export default {
		components: { KeyBoard },
		props: {
			BindPhone: String,
			value: {
				type: Boolean,
				default: false
			},
			verify: {
				type: String,
				default: ''
			},
			vcode: {
				type: String,
				default: ''
			},
			pass: Object
		},
		computed: {
			...mapGetters([ 'userInfo' ]),
			passLen () {
				return this.pass.pw.length
			},
			v_code () {
				return this.vcode.split('')
			},
			phone () {
				if (this.BindPhone) {
					return this.BindPhone.substr(0, 3) + '****' + this.BindPhone.substr(7)
				}
				return this.userInfo.phone.substr(0, 3) + '****' + this.userInfo.phone.substr(7)
			}
		},
		methods: {
			key (e) {
				if (this.pass.pw.length < 6 || (this.verify && this.vcode.length < 6)) this.$emit('key', e)
			},
			del () {
				if (this.pass.pw.length > 0 || (this.verify && this.vcode.length > 0)) this.$emit('del') 
			},
			clear () {
				this.$emit('input', false)
				this.$emit('on-clear')
			}
		},
		watch: {
			pass: {
				handler (val, oldval) {
					if (val.pw.length === 6) {
						if (val.pw === this.userInfo.pay_pwd) {
							this.$emit('submit')
						} else {
							uni.showToast({
								icon: 'none',
								title: '密码错误'
							})
						}
					}
				},
				deep: true
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../common/styles/variables.less';
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:rgba(0, 0, 0, 0.4);
		transition-duration: .4s;
		will-change: opacity;
		opacity: 0;		
		z-index: 666;
		visibility: hidden;
		&.act {
			visibility: visible;
			opacity: 1;
		}
	}	
	.password-input {
		display: flex;
		border: 1px solid #ddd;
		background-color: #fff;
		border-radius: 3px;
		/* #ifndef H5 */
		transform: translate3d(0, -100%, 0);
		/* #endif */
		/* #ifdef H5 */
		transform: translate3d(0, calc(-100% - var(--window-top)), 0);
		/* #endif */
		border-radius: 20upx;
		overflow: hidden;
		box-shadow:0px 0px 8px #e4e4e4;
		position: fixed;
		top: 0;
		left: 10%;
		right: 10%;
		width: 80%;
		transition: transform .2s cubic-bezier(.09,1.1,.71,1.31);
		will-change: transform;
		contain: layout;
		z-index: 777;
		&.act { 
			/* #ifndef H5 */
			transform: translate3d(0, calc(100% + 80upx), 0);
			/* #endif */
			/* #ifdef H5 */
			transform: translate3d(0, calc(100% + 80upx + var(--window-top)), 0);
			/* #endif */
		}
		view {
			flex: .5;
			border-right: 1px solid #f3f3f3;
			position: relative;
			& > view {
				width: 100%;
				padding-top: 100%;
				&.act {
					&::after {
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						content: '\2022';
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						font-size: 52upx;
					}
				}
			}
			&:nth-child(6) {
				border: none;
			}
		}
		&.code {
			border-radius: 10upx;
			flex-direction: column;
			flex-flow: column;
			&.act { 
				/* #ifndef H5 */
				transform: translate3d(0, calc(100% + 80upx), 0);
				/* #endif */
				/* #ifdef H5 */
				transform: translate3d(0, calc(70% + var(--window-top)), 0);
				/* #endif */
			}
			.title {
				display: flex;
				align-items: center;
				justify-content: center;				
				height: 80upx;
				flex: 1;
			}
			.verify {
				height: 80upx;
				.code {
					margin: 0 auto;
					display: flex;
					height: 100%;
					padding: 0;
					width: 80%;
					border: 0 none;
					view {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36upx;
						height: 100%;
						flex: 1;
						padding: 0;
						position: relative;
						border: 0 none;
						margin: 0 10upx;
						&.act {
							&::after {
								display: none;
							}
						}
						&::after {
							position: absolute;
							top: 50%;
							width: 100%;
							border-top:1px solid #bfbbbb;
							content: '';
						}
					}
				}
			}
		}
	}		
</style>
